<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form ref="form" :rules="rules" :model="form" label-width="auto">
        <el-card>
          <div slot="header" class="clearfix">
            <span>商铺设置</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商铺logo" prop="logo">
                <el-upload
                  ref="my-upload"
                  v-model="form.logo"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :headers="headers"
                  :action="imagesUploadApi"
                  :data="type"
                  list-type="picture"
                  :limit="1"
                  class="avatar-uploader"
                  :show-file-list="false"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信二维码" prop="wechat">
                <el-upload
                  ref="my-upload-wechat"
                  v-model="form.wechat"
                  :on-success="handleSuccess1"
                  :on-error="handleError"
                  :headers="headers"
                  :action="imagesUploadApi"
                  :data="type"
                  list-type="picture"
                  :limit="1"
                  class="avatar-uploader"
                  :show-file-list="false"
                >
                  <img v-if="imageUrlwechat" :src="imageUrlwechat" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商铺名称" prop="name">
                <el-input v-model="form.name" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="facebook" prop="facebook">
                <el-input v-model="form.facebook" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="contact">
                <el-input v-model="form.contact" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="instagram" prop="instagram">
                <el-input v-model="form.instagram" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address" style="width: 300px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="twitter" prop="twitter">
                <el-input v-model="form.twitter" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="e-mail" prop="email">
                <el-input v-model="form.email" style="width: 300px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="boxCard">
          <div slot="header" class="clearfix">
            <span>订单设置</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单收取包装费" prop="bagFee">
                <el-input-number v-model="form.bagFee" style="width: 200px;" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成长值兑换规则" prop="growthRule">
                <el-input-number v-model="form.growthRule" style="width: 300px;" :min="0" />
                <br>
                <el-link type="info" disabled>1元=1积分则是1，一元等于10积分则是10</el-link>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="待付款订单取消时间" prop="orderOvertime">

                <el-select v-model="form.orderOvertime" placeholder="请选择待付款订单取消时间">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                分鐘
                <br>
                <el-link type="info" disabled>拍下订单在此段时间内未付款,订单将自动取消</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="积分兑换规则" prop="scoreRule">
                <el-input-number v-model="form.scoreRule" style="width: 300px;" :min="0" />
                <br>
                <el-link type="info" disabled>1元=1积分则是1，一元等于10积分则是10</el-link>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="待评价订单默认好评时间" prop="commentOvertime">
                <el-input v-model="form.commentOvertime" placeholder="请输入内容" style="width: 300px;">
                  <template slot="append">天</template>
                </el-input>
                <br>
                <el-link type="info" disabled>从确认收货时间开始计算</el-link>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-card class="boxCardBelow">
                <div slot="header" class="clearfix">
                  <span>澳門島派送方案選擇</span>
                </div>
                <el-form-item label="派送配置方案" prop="macDeliverSetId">
                  <el-select
                    v-model="form.macauPeninsulaOrderSet.deliverSet.id"
                    placeholder="请选配置"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in deliverSetNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="本區自提配置選擇" prop="macDeliverSetId">
                  <el-select
                    v-model="form.macauPeninsulaOrderSet.selfDeliverSet.id"
                    placeholder="请选配置"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in deliverSetGetBySelfNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="boxCardBelow">
                <div slot="header" class="clearfix">
                  <span>路沊區派送方案選擇</span>
                </div>
                <el-form-item label="派送配置方案" prop="dzDeliverSetId">
                  <el-select
                    v-model="form.dzOrderSet.deliverSet.id"
                    placeholder="请选配置"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in deliverSetNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="本區自提配置選擇" prop="dzDeliverSetId">
                  <el-select
                    v-model="form.dzOrderSet.selfDeliverSet.id"
                    placeholder="请选配置"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in deliverSetGetBySelfNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="boxCard">
          <div slot="header" class="clearfix">
            <span>配送设置</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文如遇缺货处理选项" prop="outStocksCn" style="margin-bottom:0px">
                <el-input
                  v-model="outStock"
                  style="width: 200px;"
                  clearable
                  @keyup.enter.native="handleoutStocksCn"
                />
                <el-button class="littleMarginLeft" type="success" @click="handleoutStocksCn">增加</el-button>
              </el-form-item>
              <el-tag
                v-for="(item,index) in outStocksTagsCn"
                :key="item"
                closable
                style="margin-right: 10px; clear：left(right，both)"
                @close="delTag(index)"
              > {{ item }}
              </el-tag>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文如遇缺货处理选项" prop="outStocksCn" style="margin-bottom:0px">
                <el-input
                  v-model="outStockEn"
                  style="width: 200px;"
                  clearable
                  @keyup.enter.native="handleoutStocksEn"
                />
                <el-button class="littleMarginLeft" type="success" @click="handleoutStocksEn">增加</el-button>
              </el-form-item>
              <el-tag
                v-for="(item,index) in outStocksTagsEn"
                :key="item"
                closable
                style="margin-right: 10px; clear：left(right，both)"
                @close="delTagEn(index)"
              > {{ item }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文买家留言快捷选项" prop="buyerMemosCn" style="margin-bottom:0px">
                <el-input
                  v-model="buyerMemo"
                  style="width: 200px;"
                  clearable
                  @keyup.enter.native="buyerMemosCnList"
                />
                <el-button class="littleMarginLeft" type="success" @click="buyerMemosCnList">增加</el-button>
              </el-form-item>
              <el-tag
                v-for="(item,index) in buyerMemosListTagsCn"
                :key="item"
                closable
                style="margin-right: 10px; clear：left(right，both)"
                @close="tagClose(index)"
              > {{ item }}
              </el-tag>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文买家留言快捷选项" prop="buyerMemosCn" style="margin-bottom:0px">
                <el-input
                  v-model="buyerMemoEn"
                  style="width: 200px;"
                  clearable
                  @keyup.enter.native="buyerMemosCnListEn"
                />
                <el-button class="littleMarginLeft" type="success" @click="buyerMemosEnList">增加</el-button>
              </el-form-item>
              <el-tag
                v-for="(item,index) in buyerMemosListTagsEn"
                :key="item"
                closable
                style="margin-right: 10px; clear：left(right，both)"
                @close="tagCloseEn(index)"
              > {{ item }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="配送费模板名称" prop="dzDeliverSetId">
              <el-select
                v-model="form.freightTemplate.id"
                placeholder="请选配置"
                clearable
                filterable
              >
                <el-option
                  v-for="item in deliveryFeeSetsOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-card>
        <el-card class="boxCard">
          <div slot="header" class="clearfix">
            <span>其他设置</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话区号" prop="areaCode">
                <el-input
                  v-model="areaCode"
                  style="width: 200px;"
                  clearable
                  @keyup.enter.native="areaCodesList"
                />
                <el-button class="littleMarginLeft" type="success" @click="areaCodesList">增加</el-button>
                <el-tag
                  v-for="(item,index) in areaCodeTags"
                  :key="item"
                  closable
                  style="margin-right: 10px; clear：left(right，both)"
                  @close="areaCodeTagsClose(index)"
                > {{ item }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="用戶協議">
                <el-button type="text" size="small" @click="userAgreementCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="userAgreementCnDialog = true">编辑</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业时间">
                <el-button type="text" size="small" @click="businessHoursCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="businessHoursCnDialog =true">编辑</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="運費收費提醒">
                <el-button type="text" size="small" @click="freightRemindCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="freightRemindCnDialog =true">编辑</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="關於我們">
                <el-button type="text" size="small" @click="aboutUsCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="aboutUsCnDialog =true">编辑</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="退換貨政策">
                <el-button type="text" size="small" @click="returnCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="returnCnDialog =true">编辑</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="運費和派送">
                <el-button type="text" size="small" @click="shippingCnDialogShow = true">查看</el-button>
                <el-button type="text" size="small" @click="shippingCnDialog =true">编辑</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <el-card class="emptyBorder">
        <div style="height: 40px;margin: 0 auto">
          <el-button class="button" size="medium" type="primary" @click="dialogVisible=true">保存</el-button>
        </div>
      </el-card>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span>确认修改商铺信息?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="userAgreementCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameUG" type="card" stretch>
          <el-tab-pane label="中文用戶協議" name="detailCn">
            <tinymce v-model="form.userAgreementCn" />
          </el-tab-pane>
          <el-tab-pane label="英文用戶協議" name="detailEn">
            <tinymce v-model="form.userAgreementEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="userAgreementCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="userAgreementCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameUG" type="card" stretch>
            <el-tab-pane label="中文用戶協議" name="detailCn">
              <div v-html="userAgreementCnDetaisl" />
            </el-tab-pane>
            <el-tab-pane label="英文用戶協議" name="detailEn">
              <div v-html="userAgreementCnDetaislEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="businessHoursCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameBH" type="card" stretch>
          <el-tab-pane label="中文營業時間" name="detailCn">
            <tinymce v-model="form.businessHoursCn" />
          </el-tab-pane>
          <el-tab-pane label="英文營業時間" name="detailEn">
            <tinymce v-model="form.businessHoursEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="businessHoursCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="businessHoursCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameBH" type="card" stretch>
            <el-tab-pane label="中文營業時間" name="detailCn">
              <div v-html="businessHoursCnDetails" />
            </el-tab-pane>
            <el-tab-pane label="英文營業時間" name="detailEn">
              <div v-html="businessHoursCnDetailsEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="freightRemindCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameFR" type="card" stretch>
          <el-tab-pane label="中文運費收費提醒" name="detailCn">
            <tinymce v-model="form.freightRemindCn" />
          </el-tab-pane>
          <el-tab-pane label="英文運費收費提醒" name="detailEn">
            <tinymce v-model="form.freightRemindEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="freightRemindCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="freightRemindCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameFR" type="card" stretch>
            <el-tab-pane label="中文運費收費提醒" name="detailCn">
              <div v-html="freightRemindCnDetails" />
            </el-tab-pane>
            <el-tab-pane label="英文運費收費提醒" name="detailEn">
              <div v-html="freightRemindCnDetailsEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="aboutUsCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameAU" type="card" stretch>
          <el-tab-pane label="中文關於我們" name="detailCn">
            <tinymce v-model="form.aboutUsCn" />
          </el-tab-pane>
          <el-tab-pane label="英文關於我們" name="detailEn">
            <tinymce v-model="form.aboutUsEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="aboutUsCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="aboutUsCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameAU" type="card" stretch>
            <el-tab-pane label="中文關於我們" name="detailCn">
              <div v-html="aboutUsCnDetails" />
            </el-tab-pane>
            <el-tab-pane label="英文關於我們" name="detailEn">
              <div v-html="aboutUsCnDetailsEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="returnCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameR" type="card" stretch>
          <el-tab-pane label="中文退換貨政策" name="detailCn">
            <tinymce v-model="form.returnCn" />
          </el-tab-pane>
          <el-tab-pane label="英文退換貨政策" name="detailEn">
            <tinymce v-model="form.returnEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="returnCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="returnCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameR" type="card" stretch>
            <el-tab-pane label="中文退換貨政策" name="detailCn">
              <div v-html="returnCnDetails" />
            </el-tab-pane>
            <el-tab-pane label="英文退換貨政策" name="detailEn">
              <div v-html="returnCnDetailsEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="shippingCnDialog"
        top="0"
      >
        <el-tabs v-model="activeHtmlNameS" type="card" stretch>
          <el-tab-pane label="中文運費和派送" name="detailCn">
            <tinymce v-model="form.shippingCn" />
          </el-tab-pane>
          <el-tab-pane label="英文運費和派送" name="detailEn">
            <tinymce v-model="form.shippingEn" />
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="shippingCnDialog = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="shippingCnDialogShow"
        top="0"
      >
        <div class="dialogDiv">
          <el-tabs v-model="activeHtmlNameS" type="card" stretch>
            <el-tab-pane label="中文運費和派送" name="detailCn">
              <div v-html="shippingCnDetails" />
            </el-tab-pane>
            <el-tab-pane label="英文運費和派送" name="detailEn">
              <div v-html="shippingCnDetailsEn" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '@/api/sms/mallSet'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import deliverSet from '@/api/sms/deliverSet'
import freightApi from '@/api/pms/freightTemplate'
import Tinymce from '@/components/Tinymce'

const defualtForm = {
  areaCode: [],
  userAgreementCn: '',
  businessHoursCn: '',
  freightRemindCn: '',
  aboutUsCn: '',
  aboutUsEn: '',
  businessHoursEn: '',
  freightRemindEn: '',
  userAgreementEn: '',
  shippingCn: '',
  shippingEn: '',
  twitter: '',
  wechat: '',
  facebook: '',
  instagram: '',
  name: null,
  address: '',
  deliveryTime: [],
  id: '',
  email: '',
  contact: '',
  orderOvertime: '',
  bagFee: '',
  finishOvertime: '',
  commentOvertime: '',
  recommendNumber: '',
  growthRule: '',
  confirmOvertime: '',
  logo: '',
  scoreRule: '',
  outStocksCn: [],
  buyerMemosCn: [],
  outStocksEn: [],
  buyerMemosEn: [],
  returnCn: '',
  returnEn: '',
  dzOrderSet: {
    enable: true,
    deliverSet: {
      id: ''
    },
    selfDeliverSet: {
      id: ''
    }
  },
  macauPeninsulaOrderSet: {
    enable: true,
    deliverSet: {
      id: ''
    },
    selfDeliverSet: {
      id: ''
    }
  },
  freightTemplate: {
    id: ''
  },
  selfPackAddresses: []
}
export default {
  name: 'MallSet',
  components: { Tinymce },
  data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      // 商品富文本详情激活类型
      activeHtmlNameUG: 'detailCn',
      activeHtmlNameBH: 'detailCn',
      activeHtmlNameAU: 'detailCn',
      activeHtmlNameFR: 'detailCn',
      activeHtmlNameR: 'detailCn',
      activeHtmlNameS: 'detailCn',
      outStocksTagsEn: [],
      input: '',
      type: { type: 3 },
      outStocksTagsCn: [],
      buyerMemosListTagsEn: [],
      buyerMemosListTagsCn: [],
      buyerMemosCnListEn: [],
      areaCodeTags: [],
      businessHoursCnDialogShow: false,
      freightRemindCnDialogShow: false,
      returnCnDialogShow: false,
      aboutUsCnDialogShow: false,
      shippingCnDialogShow: false,
      returnCnDialog: false,
      dialogVisible: false,
      freightRemindCnDialog: false,
      imageUrl: '',
      imageUrlwechat: '',
      businessHoursCnDialog: false,
      aboutUsCnDialog: false,
      shippingCnDialog: false,
      deliverSetNameOptions: [],
      deliverSetGetBySelfNameOptions: [],
      userAgreementCnDialogShow: false,
      deliveryFeeSetsOptions: [],
      userAgreementCnDetaisl: '',
      businessHoursCnDetaisl: '',
      freightRemindCnDetails: '',
      shippingCnDetails: '',
      aboutUsCnDetails: '',
      returnCnDetails: '',
      businessHoursCnDetails: '',
      businessHoursCnDetailsEn: '',
      userAgreementCnDetaislEn: '',
      businessHoursCnDetaislEn: '',
      freightRemindCnDetailsEn: '',
      shippingCnDetailsEn: '',
      aboutUsCnDetailsEn: '',
      returnCnDetailsEn: '',
      outStock: '',
      buyerMemo: '',
      areaCode: '',
      buyerMemoEn: '',
      outStockEn: '',
      userAgreementCnDialog: false,
      form: Object.assign({}, defualtForm),
      rules: {
        name: [
          { required: true, message: '店面不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址内容不能为空', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '订单配送时间段不能为空', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' }
        ],
        orderOvertime: [
          { required: true, message: '待付款订单取消时间不能为空', trigger: 'blur' }
        ],
        bagFee: [
          { required: true, message: '订单收取包装费不能为空', trigger: 'blur' }
        ],
        finishOvertime: [
          { required: true, message: '自动完成交易时间，不能申请售后不能为空', trigger: 'blur' }
        ],
        commentOvertime: [
          { required: true, message: '待评价订单默认好评时间不能为空', trigger: 'blur' }
        ],
        recommendNumber: [
          { required: true, message: '推荐商品显示个数不能为空', trigger: 'blur' }
        ],
        growthRule: [
          { required: true, message: '成长值兑换规则不能为空', trigger: 'blur' }
        ],
        confirmOvertime: [
          { required: true, message: '自动确认收货时间不能为空', trigger: 'blur' }
        ],
        scoreRule: [
          { required: true, message: '积分兑换规则不能为空', trigger: 'blur' }
        ],
        facebook: [
          { required: true, message: 'facebook不能为空', trigger: 'blur' }
        ],
        twitter: [
          { required: true, message: 'twitter不能为空', trigger: 'blur' }
        ],
        instagram: [
          { required: true, message: 'instagram不能为空', trigger: 'blur' }
        ],
        areaCode: [
          { required: true, message: '电话区号不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'e-mail不能为空', trigger: 'blur' }
        ],
        wechat: [
          { required: true, message: 'wechat不能为空', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: 'logo不能为空', trigger: 'blur' }
        ]
      },
      options: [{
        value: '10',
        label: '10'
      }, {
        value: '20',
        label: '20'
      }, {
        value: '30',
        label: '30'
      }]
    }
  },
  computed: {
    ...mapGetters(['imagesUploadApi', 'baseApi'])
  },
  created() {
    api.getAll().then(res => {
      const formData = res.data
      this.form.name = formData.name
      this.form.address = formData.address
      this.form.bagFee = formData.bagFee
      this.form.commentOvertime = formData.commentOvertime
      this.form.confirmOvertime = formData.confirmOvertime
      this.form.deliveryTime = formData.deliveryTime
      this.form.contact = formData.contact
      this.form.finishOvertime = formData.finishOvertime
      this.form.recommendNumber = formData.recommendNumber
      this.form.orderOvertime = formData.orderOvertime
      this.form.growthRule = formData.growthRule
      this.imageUrlwechat = this.baseApi + formData.wechat
      this.imageUrl = this.baseApi + formData.logo
      this.form.logo = formData.logo
      this.form.wechat = formData.wechat
      this.form.scoreRule = formData.scoreRule
      this.form.id = formData.id
      if (formData.buyerMemosCn) {
        this.buyerMemosListTagsCn = formData.buyerMemosCn
      } else {
        this.buyerMemosListTagsCn = ''
      }
      if (formData.outStocksCn) {
        this.outStocksTagsCn = formData.outStocksCn
      } else {
        this.outStocksTagsCn = ''
      }
      if (formData.buyerMemosEn) {
        this.buyerMemosListTagsEn = formData.buyerMemosEn
      } else {
        this.buyerMemosListTagsEn = ''
      }
      if (formData.outStocksEn) {
        this.outStocksTagsEn = formData.outStocksEn
      } else {
        this.outStocksTagsEn = ''
      }
      if (formData.areaCode) {
        this.areaCodeTags = formData.areaCode
      } else {
        this.areaCodeTags = ''
      }
      if (formData.dzOrderSet !== null) {
        this.form.dzOrderSet.deliverSet.id = formData.dzOrderSet.deliverSet.id
        this.form.dzOrderSet.selfDeliverSet.id = formData.dzOrderSet.selfDeliverSet.id
      }
      if (formData.macauPeninsulaOrderSet !== null) {
        this.form.macauPeninsulaOrderSet.deliverSet.id = formData.macauPeninsulaOrderSet.deliverSet.id
        this.form.macauPeninsulaOrderSet.selfDeliverSet.id = formData.macauPeninsulaOrderSet.selfDeliverSet.id
      }
      this.form.freightTemplate.id = formData.freightTemplate.id
      this.form.instagram = formData.instagram
      this.form.facebook = formData.facebook
      this.form.twitter = formData.twitter
      this.form.areaCode = formData.areaCode
      this.form.email = formData.email
      this.form.aboutUsCn = formData.aboutUsCn
      this.form.aboutUsEn = formData.aboutUsEn
      this.form.businessHoursCn = formData.businessHoursCn
      this.form.businessHoursEn = formData.businessHoursEn
      this.form.freightRemindCn = formData.freightRemindCn
      this.form.freightRemindEn = formData.freightRemindEn
      this.form.userAgreementCn = formData.userAgreementCn
      this.form.userAgreementEn = formData.userAgreementEn
      this.userAgreementCnDetaisl = formData.userAgreementCn
      this.aboutUsCnDetails = formData.aboutUsCn
      this.businessHoursCnDetails = formData.businessHoursCn
      this.freightRemindCnDetails = formData.freightRemindCn
      this.returnCnDetails = formData.returnCn
      this.shippingCnDetails = formData.shippingCn
      this.userAgreementCnDetaislEn = formData.userAgreementEn
      this.aboutUsCnDetailsEn = formData.aboutUsEn
      this.businessHoursCnDetailsEn = formData.businessHoursEn
      this.freightRemindCnDetailsEn = formData.freightRemindEn
      this.returnCnDetailsEn = formData.returnEn
      this.shippingCnDetailsEn = formData.shippingEn
    })
    deliverSet.findAll({ deliveryType: 0, enable: true }).then(res => {
      this.deliverSetNameOptions = res.data
    })
    deliverSet.findAll({ deliveryType: 1, enable: true }).then(res => {
      this.deliverSetGetBySelfNameOptions = res.data
    })
    freightApi.findAll().then(res => {
      this.deliveryFeeSetsOptions = res.data
    })
  },
  methods: {
    handleoutStocksCn() {
      const options = this.outStocksTagsCn
      if (this.outStock === null || this.outStock === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.outStock) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.outStocksTagsCn.push(this.outStock)
      this.outStock = ''
    },
    buyerMemosCnList() {
      const options = this.buyerMemosListTagsCn
      console.log(this.buyerMemosListTagsCn)
      if (this.buyerMemo === null || this.buyerMemo === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.buyerMemo) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.buyerMemosListTagsCn.push(this.buyerMemo)
      this.buyerMemo = ''
    },
    handleoutStocksEn() {
      const options = this.outStocksTagsEn
      if (this.outStockEn === null || this.outStockEn === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.outStockEn) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.outStocksTagsEn.push(this.outStockEn)
      this.outStockEn = ''
    },
    buyerMemosEnList() {
      const options = this.buyerMemosListTagsEn
      console.log(this.buyerMemosListTagsEn)
      if (this.buyerMemoEn === null || this.buyerMemoEn === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.buyerMemoEn) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.buyerMemosListTagsEn.push(this.buyerMemoEn)
      this.buyerMemoEn = ''
    },
    areaCodesList() {
      const options = this.areaCodeTags
      if (this.areaCode === null || this.areaCode === '') {
        this.$message({
          message: '属性值不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (options.indexOf(this.areaCode) !== -1) {
        this.$message({
          message: '属性值不能重复',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.areaCodeTags.push(this.areaCode)
      this.areaCode = ''
    },
    handleExceed() {
      this.$message.warning('当前限制选择 1张图片，请重新选择')
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.form.logo = res.data.url
      } else {
        this.$message.error('图片上传失败,请重新上传')
      }
      this.imageUrl = URL.createObjectURL(file.raw)
      this.clearFiles()
    },
    handleError() {
      this.$message.error('图片上传失败,请重新上传')
      this.clearFiles()
    },
    clearFiles() {
      this.$refs['my-upload'].clearFiles()
      this.$refs['my-upload-wechat'].clearFiles()
    },
    handleSuccess1(res, file) {
      if (res.code === 0) {
        this.form.wechat = res.data.url
      } else {
        this.$message.error('图片上传失败,请重新上传')
      }
      this.imageUrlwechat = URL.createObjectURL(file.raw)
      this.clearFiles()
    },
    onSubmit() {
      this.form.buyerMemosCn = this.buyerMemosListTagsCn
      this.form.outStocksCn = this.outStocksTagsCn
      this.form.areaCode = this.areaCodeTags
      this.form.buyerMemosEn = this.buyerMemosListTagsEn
      this.form.outStocksEn = this.outStocksTagsEn
      if (this.form.dzOrderSet.selfDeliverSet.id === '' ||
        this.form.macauPeninsulaOrderSet.selfDeliverSet.id === '' || this.form.macauPeninsulaOrderSet.deliverSet.id === '') {
        return this.$message.error('订单设置不能为空')
      }
      this.$refs.form.validate((a) => {
        if (!a) {
          return this.$message.error('字段不能为空')
        }
        if (a) {
          api.edit(this.form).then(() => {
            this.$message.success('修改成功')
          })
        }
      })
      this.dialogVisible = false
      this.form.buyerMemosCn = null
      this.form.outStocksCn = null
      this.form.buyerMemosEn = null
      this.form.outStocksEn = null
      this.form.areaCode = null
    },
    delTag(index) {
      this.outStocksTagsCn.splice(index, 1)
    },
    delTagEn(index) {
      this.outStocksTagsEn.splice(index, 1)
    },
    tagClose(index) {
      this.buyerMemosListTagsCn.splice(index, 1)
    },
    tagCloseEn(index) {
      this.buyerMemosListTagsEn.splice(index, 1)
    },
    areaCodeTagsClose(index) {
      this.areaCodeTags.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scope>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
  height: 20px;
}

.emptyBorder {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  bottom: 30px;
  height: 50px;
  z-index: 999;
}

.boxCardBelow {
  height: 20%;
  width: 600px;
}

.button {
  position: absolute;
  right: 50%;
  top: 20%;
}

.boxCard {
  margin-top: 20px;
}

el-input {
  width: 100%;
  height: 40px;
  border: 1px solid #dbdbdb;
  outline: none;
  font-size: 20px;
  text-indent: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.detailContent {
  max-height: 150px;
  overflow: auto;

  .detail {
    margin-right: 5px;
    margin-top: 4px;
  }
}

.dialogDiv {
  height: 600px;
  overflow: auto;
}
</style>
